<template>
	<div class="recipe_container">
		<div class="recipe_title">
			<h1>{{ recipe.name }}</h1>
			<div class="right-group">
				<div class="buildings-group">
					<el-tooltip v-for="build in recipe.buildings" :key="build.id" :content="build.name" placement="top">
						<div class="build_image">
							<my-image type="buildings" :icon="build.iconUrl" :size="24" />
						</div>
					</el-tooltip>
				</div>
				<div class="time">运行时间：{{ recipe.time }}s</div>
			</div>
		</div>
		<el-divider class="divider"></el-divider>
		<div class="recipe_main">
			<!-- 原料部分 -->
			<div v-for="item in recipe.ingredients" :key="item.id" class="material-item">
				<el-tooltip :content="item.name" placement="top">
					<div class="flex-center">
						<my-image type="items" :icon="item.iconUrl" :size="32" />
						<p class="recipe_text">×{{ item.amount }}</p>
					</div>
				</el-tooltip>
				<div class="bottom_text">{{ calcRate(item.amount) }} item/min</div>
			</div>

			<!-- 箭头 -->
			<p v-show="recipe.ingredients.length != 0 && recipe.products.length != 0" class="arrow">→</p>

			<!-- 产品部分 -->
			<div v-for="item in recipe.products" :key="item.id" class="material-item">
				<el-tooltip :content="item.name" placement="top">
					<div class="flex-center">
						<my-image type="items" :icon="item.iconUrl" :size="32" />
						<p class="recipe_text">×{{ item.amount }}</p>
					</div>
				</el-tooltip>
				<div class="bottom_text">{{ calcRate(item.amount) }} item/min</div>
			</div>
		</div>
	</div>
</template>

<script>
	import MyImage from "@/components/Image.vue";
	export default {
		name: "simpleRecipeInfo",
		props: ["recipe"],
		components: {
			MyImage,
		},
		methods: {
			Item(url) {
				return this.$img.i_64(url);
			},
			calcRate(amount) {
				return (Math.floor(amount / this.recipe.time * 60 * 1000) / 1000).toFixed(1);
			}
		},
	};
</script>
<style lang="less">
	@import "@/assets/less/variables.less";

	.recipe_container {
		width: 400px;
		min-height: 100px;
		padding: 16px;
		background: @color-white;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

		.recipe_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 12px;

			h1 {
				font-size: 15px;
				font-weight: 600;
				color: @color-text;
				max-width: 60%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.right-group {
				display: flex;
				align-items: center;
				gap: 12px;
			}

			.buildings-group {
				display: flex;
				gap: 8px;
				align-items: center;

				.build_image {
					padding: 4px;
					background: @color-disabled;
					border-radius: 4px;
				}

			}

			.time {
				font-size: 12px;
				color: @color-subtext;
				background: @color-disabled;
				padding: 4px 12px;
				border-radius: 14px;
			}
		}

		.divider {
			margin: 8px 0;
		}

		.recipe_main {
			display: flex;
			justify-content: space-around;
			align-items: center;
			gap: 12px;
			flex-wrap: wrap;

			.material-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 4px;
				cursor: help;
				/* 添加问号光标提示 */
				transition: opacity 0.2s;

				&:hover {
					opacity: 0.9;
				}

				.flex-center {
					display: flex;
					align-items: center;
					gap: 4px;

					.recipe_text {
						font-size: 14px;
						color: @color-text;
						white-space: nowrap;
					}
				}

				.bottom_text {
					font-size: 10px;
					color: @color-subtext;
				}
			}

			.arrow {
				font-size: 20px;
				color: @color-subtext;
				margin: 0 4px;
			}
		}

		// 统一图片样式
		::v-deep .my-image-container {
			border-radius: 4px;
		}

		/* 统一提示样式 */
		::v-deep .el-tooltip__popper {
			font-family: inherit !important;
			padding: 6px 12px !important;
			font-size: 12px !important;
			// background: @color-text !important;
			// color: @color-white !important;
			border-radius: 4px !important;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			background: @color-primary !important; // 使用主色
			color: @color-white !important; // 保持文字白色

			&[x-placement^=top] .popper__arrow {
				border-top-color: @color-text !important;
			}

			&[x-placement^=bottom] .popper__arrow {
				border-bottom-color: @color-text !important;
			}
		}
	}
</style>